<script setup>

import {onMounted, ref} from "vue";
import {ElInput, ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";

const inputValue = ref('')
const dynamicTags = ref(['好视频', '好好好', '好看爱看'])
const maxTags=6;
const inputVisible = ref(false)
const InputRef = ref(ElInput)
const area=ref();

const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
  isAddShow.value=dynamicTags.value.length<maxTags
}

const showInput = () => {
  inputVisible.value = true
  isAddShow.value=dynamicTags.value.length+1<maxTags
}
const isAddShow=ref(true)

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

const fileList = ref([])

const dialogImageUrl = ref(null)
const dialogVisible = ref(false)
const handleChange = () => {
}

const picUrl = ref('');
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
//图品的上传与删除
const handleSuccess = (response,uploadFile,uploadFiles)=>{
  if (response.data!=null){
    if (uploadFile.raw.type.includes('image')){//图片
      video.value.coverUrl='/file'+response.data;
      ElMessage({
        message:'图片上传成功!',
        type:'success',
      })
      console.log(video.value.coverUrl);
    }else{//视频
      video.value.videoUrl='/file'+response.data;
      ElMessage({
        message:'视频上传成功!',
        type:'success',
      })
      console.log(video.value.videoUrl);
    }
  }
}
const handleRemove = (uploadFile, uploadFiles) => {
  video.value.imgUrl=null;
  let url = uploadFile.response.data;
  let data={url:url};

  // console.log('urlvq：'+data);
  axios.post('http://localhost:20300/attachment/remove',qs.stringify(data))
      .then((response) => {
        if (uploadFile.raw.type.includes('image')){
          ElMessage({
            message:'图片删除完成!',
            type:'success',
          })
          video.value.coverUrl = '';
        }else{//视频
          ElMessage({
            message:'视频删除完成!',
            type:'success',
          })
          video.value.videoUrl = '';
        }
      })
}

const video = ref({
  isOriginal:'原创',//是否为原创
  title:'',
  videoUrl:'',
  coverUrl:'',
  keywords:'',
  detail:'',
})
const url='http://localhost:20900/kcircle/content/addVideo'

onMounted(()=>{
  let jwt="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJyb290IiwicmVtb3RlQWRkciI6IjA6MDowOjA6MDowOjA6MSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS8xMDkuMC4wLjAgU2FmYXJpLzUzNy4zNiBTTEJyb3dzZXIvOS4wLjAuMTAxOTEgU0xCQ2hhbi8yNSJ9.jixSxMapdjJuYgKjnpBb4T95kY1r8NXXxF09CLoP50c";
  let loginInfo=JSON.stringify({token:jwt})
  localStorage.setItem('loginInfo',loginInfo)
})

const onSubmit=()=>{
  video.value.keywords=dynamicTags.value.toString();
  if (video.value.isOriginal=='原创'){
    video.value.isOriginal=1;
  }else {
    video.value.isOriginal=0;
  }

  // console.log(video.value);
  let data=qs.stringify(video.value);
  // console.log(data)

  window.TokenAxios.post(url,data).then((response)=>{
    if (response.data!=null){
      ElMessage({
        message:'发布成功!',
        type:'success',
      })
      //刷新页面
      location.reload();
      console.log(response.data);
    }else {
      ElMessage({
        message:'发布失败!',
        type:'error',
      })
    }
  })
}

</script>

<template>
  <div style="width:1000px;margin:0 auto">
    <el-row :gutter="10">

      <el-col :span="16">
        <div style="background-color: white;">
          <div style="padding: 20px 30px;padding-bottom: 5px">
            <el-form-item label="封面">
              <el-upload
                  v-model:file-list="fileList"
                  action="http://localhost:20300/attachment/upload"
                  name="file"
                  limit=1
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
              >
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image"/>
              </el-dialog>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="video.title" placeholder="请输入标题" minlength="1" maxlength="30" show-word-limit/>
            </el-form-item>

            <el-form-item label="简介">
              <el-input v-model="video.detail" placeholder="填写视频简介,让更多人看到你的视频" type="textarea" minlength="1" maxlength="200" show-word-limit :autosize="{minRows:5,maxRows:10}"/>
            </el-form-item>

            <el-form-item label="所属领域">
              <el-select v-model="area" placeholder="选择领域">
                <el-option label="体育"></el-option>
                <el-option label="电子竞技"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绑定话题">
              <el-tag
                  v-for="tag in dynamicTags"
                  :key="tag"
                  class="mx-1"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                  round
              >
                {{ tag }}
              </el-tag>
              <el-input
                  v-if="inputVisible"
                  ref="InputRef"
                  v-model="inputValue"
                  class="ml-1 w-20"
                  size="small"
                  @keyup.enter="handleInputConfirm"
                  @blur="handleInputConfirm"
              />
              <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput" v-show="isAddShow">
                + 绑定话题 （{{dynamicTags.length}}/{{maxTags}}）
              </el-button>
            </el-form-item>
            <el-form-item label="视频类型">
              <el-radio-group v-model="video.isOriginal">
                <el-radio label="原创" />
                <el-radio label="转载" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="添加视频" style="margin-bottom: 28px">
<!--              <el-button type="primary">-->
<!--                <el-icon class="el-icon&#45;&#45;right" size="small">-->
<!--                  <Upload/>-->
<!--                </el-icon>-->
<!--                添加视频-->
<!--              </el-button>-->

              <el-upload
                  action="http://localhost:20300/attachment/upload"
                  name="file"
                  limit=1
                  drag
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  将文件拖到此处或<em>点击上传</em>
                </div>
                <template #tip>
                  <div class="el-upload__tip">
                    文件大小最好小于50M
                  </div>
                </template>
              </el-upload>
            </el-form-item>

            <div style="margin-left: 59.5%;padding: 5px 20px">
              <el-form-item>
                <el-button size="large">取消发布</el-button>
                <el-button size="large" type="primary" @click="onSubmit">发布视频</el-button>
              </el-form-item>
            </div>

          </div>


        </div>

      </el-col>
      <el-col :span="8">
        <el-card style="height: 500px;width: 320px;position: fixed">
          <h1>手机预览</h1>
        </el-card>
      </el-col>
    </el-row>


  </div>

</template>

<style scoped>
div{
 color:rgb(5, 109, 232)
}
</style>